import { Section } from "@/components";
import styles from "./index.module.scss";
/**
 * 挤压和拉伸
 */
const SquashAndStretch = () => {
  return (
    <Section className={styles.wrapper}>
      <div className={styles.desc}>
        <h4>1.挤压与拉伸</h4>
        <p>每个球在跳起之前都会有一个压缩准备动作</p>
        <p>在压缩的过程中高度变低，宽度变宽。</p>
        <p>这就是挤压和拉伸，让动画看上去更加真实</p>
      </div>
      <div className={styles.demoWrapper}>
        <div className={styles.circle}></div>
        <div className={styles.circle}></div>
        <div className={styles.circle}></div>
        <div className={styles.shadow}></div>
        <div className={styles.shadow}></div>
        <div className={styles.shadow}></div>
        <span>Loading</span>
      </div>
    </Section>
  );
};

export default SquashAndStretch;
